<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
    <div th:replace="common/IncludeTop">
    </div>

    <div id="Content">
        <div id="BackLink">
            <a href="/catalog/view">Return to Main Menu</a>
        </div>

        <script src="static/js/jquery-3.4.1.js"></script>
        <script>
            function changeQuantity(targetItem) {
                var xhr;
                var quantity = document.getElementById(targetItem).value;
                var price = document.getElementById("price"+targetItem).innerText;
                var itemId = document.getElementById("itemId"+targetItem).innerText;

                if(quantity != "" && quantity != null) {
                    if (window.XMLHttpRequest) {
                        xhr = new XMLHttpRequest();
                    } else {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                }

                xhr.onreadystatechange=function () {
                    if(xhr.readyState==4&&xhr.status==200){
                        var responseInfo = xhr.responseText;
                        var thTotal = document.getElementById("total"+targetItem);
                        thTotal.innerText = "$"+responseInfo;
                    }
                };
                xhr.open("post","cartCalculate",true);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send("quantity="+quantity+"&price="+price+"&itemId="+itemId);

            }
        </script>

        <div id="Catalog">
            <div id="Cart">
                <h2>Shopping Cart</h2>
                <form action="updateCartQuantities" method="post">
                    <table>
                        <tr>
                            <th><b>Item ID</b></th>
                            <th><b>Product ID</b></th>
                            <th><b>Description</b></th>
                            <th><b>In Stock?</b></th>
                            <th><b>Quantity</b></th>
                            <th><b>List Price</b></th>
                            <th><b>Total Cost</b></th>
                            <th>&nbsp;</th>
                        </tr>

                        <tr th:if="${session.cart == null || session.cart.numberOfItems == 0}">
                            <td colspan="8"><b>Your cart is empty.</b></td>
                        </tr>

                        <block th:if="${session.cart != null}">
                        <tr th:each="cartItem:${session.cart.cartItemList}">
                            <td>
                                <a th:href="@{'/catalog/viewItem?itemId='+${cartItem.item.itemId}+'&productId='+${cartItem.item.productId}}" th:text="${cartItem.item.itemId}">Item ID</a>
                            </td>
                            <td th:text="${cartItem.item.productId}">
                                Product ID
                            </td>
                            <td th:text="${cartItem.item.attribute1 != null? cartItem.item.attribute1:''}+${cartItem.item.attribute2 != null? cartItem.item.attribute2:''}+
                            ${cartItem.item.attribute3 != null? cartItem.item.attribute3:''}+${cartItem.item.attribute4 != null? cartItem.item.attribute4:''}+
                            ${cartItem.item.attribute5 != null? cartItem.item.attribute5:''}">
                                Description
                            </td>
                            <td th:text="${cartItem.inStock}">
                                InStock
                            </td>
                            <td>
                                <input th:type="text" th:id="${cartItem.item.itemId}" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" oninput="changeQuantity('${cartItem.item.itemId}')"/>
                            </td>
                            <td th:id="'price' + ${cartItem.item.itemId}" th:text="'$' + ${cartItem.item.listPrice}">
                                Price
                            </td>
                            <td th:id="'total' + ${cartItem.item.itemId}" th:text="'$' + ${cartItem.total}">
                                total price
                            </td>
                            <td>
                                <a th:href="@{'/cart/removeItemFromCart?workingItemId=' + ${cartItem.item.itemId}}" th:class="Button">
                                    Remove
                                </a>
                            </td>
                        <tr>
                            <td colspan="7">
                                <input type="submit" value="Update Cart"/>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                        </block>
                    </table>
                </form>

                    <a th:href="@{'/order/newOrder'}" th:class="Button" th:id="checkOut">
                        Proceed to Checkout
                    </a>

            </div>

            <div id="Separator">&nbsp;
            </div>
        </div>
    </div>


    <div th:replace="common/IncludeBottom">
    </div>
</body>
</html>